<template>
	<view class="search-container">
		<!-- 自定义搜索头部 -->
		<view class="header-bag" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="header-content" :style="{ height: navBarHeight + 'px' }">
				<view class="back-btn" @click="goBack">
					<u-icon name="arrow-left" size="24" color="#fff"></u-icon>
				</view>
				<view class="search-address">
					<u-icon name="search" size="16" color="#999"></u-icon>
					<input type="text" v-model="searchKeyword" placeholder="搜索商品/商家" @input="onInput" @confirm="onSearch"
						:focus="true" class="search-input" />
					<u-icon v-if="searchKeyword" name="close-circle-fill" size="16" color="#ccc" @click="clearInput"></u-icon>
				</view>
			</view>
		</view>

		<!-- 搜索历史 -->
		<view v-if="showHistory" class="history-wrapper" :style="{ paddingTop: navbarTotalHeight + 'px' }">
			<view v-if="searchHistory.length > 0">
				<view class="history-header">
					<text class="history-title">历史搜索</text>
				</view>
				<view class="history-divider"></view>
				<view class="history-list">
					<view v-for="(item, index) in searchHistory" :key="index" class="history-item"
						@click="selectHistory(item)">
						{{ item }}
					</view>
				</view>
				<view class="clear-history" @click="clearHistory">
					<u-icon name="trash-fill" size="24" color="#999"></u-icon>
					<text class="history-clear">清空历史记录</text>
				</view>
			</view>
			<view v-else class="empty-history">
				<text class="empty-text">暂无搜索记录</text>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view v-if="showFilters" class="goods-list" :style="{ paddingTop: navbarTotalHeight + 'px' }">
			<view class="filter-bar" :style="{ top: navbarTotalHeight + 'px' }">
				<view class="filter-item" :class="{ active: activeFilter === 'category' }"
					@click="toggleFilter('category')">
					<text>{{ selectedCategory || '全部分类' }}</text>
					<u-icon :name="activeFilter === 'category' ? 'arrow-up' : 'arrow-down'" size="12" :color="activeFilter === 'category' ? '#ff1e00' : '#999'"></u-icon>
				</view>
				<view class="filter-item" :class="{ active: activeFilter === 'area' }" @click="toggleFilter('area')">
					<text>{{ selectedArea || '附近' }}</text>
					<u-icon :name="activeFilter === 'area' ? 'arrow-up' : 'arrow-down'" size="12" :color="activeFilter === 'area' ? '#ff1e00' : '#999'"></u-icon>
				</view>
				<view class="filter-item" :class="{ active: activeFilter === 'sort' }" @click="toggleFilter('sort')">
					<text>{{ selectedSort || '智能排序' }}</text>
					<u-icon :name="activeFilter === 'sort' ? 'arrow-up' : 'arrow-down'" size="12" :color="activeFilter === 'sort' ? '#ff1e00' : '#999'"></u-icon>
				</view>
				<view class="filter-item" :class="{ active: activeFilter === 'filter' }"
					@click="toggleFilter('filter')">
					<text>筛选</text>
					<u-icon name="list" size="14" :color="activeFilter === 'filter' ? '#ff1e00' : '#999'"></u-icon>
				</view>
			</view>

			<!-- 分类下拉 -->
			<view v-if="showCategoryDropdown" class="dropdown-panel">
				<view v-for="category in categoryList" :key="category.id" class="dropdown-item"
					:class="{ active: selectedCategoryId === category.id }" @click="selectCategory(category)">
					{{ category.name }}
					<u-icon v-if="selectedCategoryId === category.id" name="checkmark" size="16" color="#ff1e00"></u-icon>
				</view>
			</view>

			<!-- 区域下拉 -->
			<view v-if="showAreaDropdown" class="dropdown-panel">
				<view v-if="areaList.length === 0" class="dropdown-item">
					暂无区域数据
				</view>
				<view v-for="area in areaList" :key="area.id" class="dropdown-item"
					:class="{ active: selectedAreaId === area.id }" @click="selectArea(area)">
					{{ area.region_name }}
				</view>
			</view>

			<!-- 排序下拉 -->
			<view v-if="showSortDropdown" class="dropdown-panel">
				<view v-for="sort in sortList" :key="sort.id" class="dropdown-item"
					:class="{ active: selectedSortId === sort.id }" @click="selectSort(sort)">
					{{ sort.name }}
				</view>
			</view>

			<!-- 筛选面板 -->
			<view v-if="showFilterPanel" class="filter-panel">
				<view class="filter-options">
					<view class="filter-option" :class="{ active: filterOptions.needReserv }"
						@click="toggleFilterOption('needReserv')">
						只看免预约
					</view>
					<view class="filter-option" :class="{ active: filterOptions.holidayUsable }"
						@click="toggleFilterOption('holidayUsable')">
						节假日可用
					</view>
					<view class="filter-option" :class="{ active: filterOptions.weekendUsable }"
						@click="toggleFilterOption('weekendUsable')">
						周六日可用
					</view>
				</view>
				<view class="filter-actions">
					<view class="reset-btn" @click="resetFilter">重置</view>
					<view class="confirm-btn" @click="applyFilter">完成</view>
				</view>
			</view>
		</view>

		<!-- 搜索结果 -->
		<scroll-view v-if="showResults" class="result-container" :style="{ paddingTop: contentPaddingTop + 'rpx' }" scroll-y @scrolltolower="loadMore">
			<!-- 有结果 -->
			<view v-if="searchResults.length > 0" class="result-list">
				<view v-for="merchant in searchResults" :key="merchant.store.store_id" class="merchant-card">
					<!-- 商家信息 -->
					<view class="merchant-info" @click="viewMerchant(merchant.store.store_id)">
						<image :src="getImageUrl(merchant.store.logo_image)" class="merchant-logo"></image>
						<view class="merchant-details">
							<text class="merchant-name">{{ merchant.store.store_name }}</text>
							<view class="rating-section">
								<view class="stars">
									<text v-for="i in 5" :key="i" class="star"
										:class="{ filled: i <= merchant.store.eval_score }">★</text>
								</view>
							</view>
							<text class="merchant-address">{{ merchant.store.address }}</text>
						</view>
					</view>

					<!-- 商品列表 -->
					<view v-for="goods in merchant.goods_list" :key="goods.group_id" class="goods-item"
						@click="viewGoods(goods.group_id, goods.store_id)">
						<view class="goods-info">
							<text class="goods-name">{{ goods.title }}{{ goods.need_resv == 1 ? '（需电话预约）' : '' }}</text>
							<text class="goods-sold">已售{{ goods.sold_num }}</text>
						</view>
						<view class="goods-price-info">
							<text class="goods-price">￥{{ goods.price }}</text>
							<text class="goods-rebate">分润￥{{ goods.rebate_price }}</text>
						</view>
					</view>

					<!-- 查看更多 -->
					<view v-if="merchant.goods_list.length > 2" class="view-more"
						@click="viewMerchant(merchant.store.store_id)">
						<text>查看更多优惠项目</text>
						<image src="/static/img/o2o/youjiantou@2x.png" class="arrow-right"></image>
					</view>
				</view>
			</view>

			<!-- 无结果 -->
			<view v-else-if="!loading && hasSearched" class="no-result">
				<image :src="serverAddress + 'img/o2o/icon_Nogoods@2x.png'" class="no-result-img"></image>
				<text class="no-result-text">暂未找到相关内容！</text>
			</view>

			<!-- 加载更多 -->
			<view v-if="loading" class="loading-more">
				<text>加载中...</text>
			</view>
		</scroll-view>

		<!-- 遮罩层 -->
		<view v-if="showMask" class="mask" :style="{ top: contentPaddingTop + 'rpx' }" @click="closeMask"></view>
	</view>
</template>

<script>
import api from '../../api/index.js'
import config from '../../api/config.js'

export default {
	data() {
		return {
			// API配置
			serverAddress: config.SERVER_ADDRESS,
			baseUrl: config.API_BASE_URL,
			
			// 系统信息
			statusBarHeight: 0,

			// 搜索相关
			searchKeyword: '',
			searchHistory: [],
			showHistory: true,
			showFilters: false,
			showResults: false,
			hasSearched: false,

			// 筛选相关
			activeFilter: '',
			showMask: false,
			showCategoryDropdown: false,
			showAreaDropdown: false,
			showSortDropdown: false,
			showFilterPanel: false,

			// 筛选选项
			selectedCategory: '',
			selectedCategoryId: 0,
			selectedArea: '',
			selectedAreaId: 0,
			selectedSort: '',
			selectedSortId: 1,

			// 筛选数据
			categoryList: [],
			areaList: [],
			sortList: [
				{ id: 1, name: '智能排序' },
				{ id: 2, name: '分润最高' },
				{ id: 3, name: '好评优先' },
				{ id: 4, name: '人气最高' }
			],

			// 高级筛选
			filterOptions: {
				needReserv: false,
				holidayUsable: false,
				weekendUsable: false
			},

			// 搜索结果
			searchResults: [],
			loading: false,
			currentPage: 1,
			hasMore: true,

			// 位置信息
			latitude: null,
			longitude: null,
			cityName: '',
			
			// 导航栏高度
			navBarHeight: 44
		}
	},

	computed: {
		// 导航栏总高度（px）
		navbarTotalHeight() {
			return this.statusBarHeight + this.navBarHeight
		},
		// 内容区域的padding-top（包含筛选栏）
		contentPaddingTop() {
			// navbarTotalHeight(px) + 筛选栏高度(88rpx)
			// 1px ≈ 2rpx，所以 px * 2 + 88
			return this.navbarTotalHeight * 2 + 88
		}
	},

	onLoad() {
		this.initPage()
	},

	onShow() {
		this.loadSearchHistory()
		this.checkLocation()
	},

	methods: {
		// 初始化页面
		initPage() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0

			// 先检查位置信息
			this.checkLocation()
			
			// 加载基础数据
			this.loadSearchHistory()
			this.loadCategories()
			this.loadAreas()
		},

		// 检查位置信息
		checkLocation() {
			this.latitude = uni.getStorageSync('lat') || 39.9042
			this.longitude = uni.getStorageSync('lng') || 116.4074
			this.cityName = uni.getStorageSync('city') || '上海市'
		},

		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		},

		// 输入事件
		onInput(e) {
			this.searchKeyword = e.detail.value
		},

		// 清空输入
		clearInput() {
			this.searchKeyword = ''
		},

		// 搜索
		async onSearch() {
			if (!this.searchKeyword.trim()) return

			// 保存搜索历史
			this.saveSearchHistory(this.searchKeyword)

			// 显示筛选和结果区域
			this.showHistory = false
			this.showFilters = true
			this.showResults = true
			this.hasSearched = true

			// 执行搜索
			await this.performSearch()
		},

		// 选择历史记录
		selectHistory(keyword) {
			this.searchKeyword = keyword
			this.onSearch()
		},

		// 执行搜索
		async performSearch(page = 1) {
			if (this.loading) return

			this.loading = true

			try {
				const params = {
					page: page,
					city_name: this.cityName,
					latitude: this.latitude,
					longitude: this.longitude,
					keyword: this.searchKeyword,
					cate_id: this.selectedCategoryId || '',
					district_id: this.selectedAreaId || '',
					order_by: this.selectedSortId || 1,
					need_resv: this.filterOptions.needReserv ? 1 : 2,
					holiday_usable: this.filterOptions.holidayUsable ? 1 : 2,
					weekend_usable: this.filterOptions.weekendUsable ? 1 : 2
				}

				const res = await api.o2oApi.searchGroupGoods(params)

				if (res.r === 0) {
					if (page === 1) {
						this.searchResults = res.data.list || []
					} else {
						this.searchResults.push(...(res.data.list || []))
					}
					this.hasMore = res.data.list && res.data.list.length > 0
				} else {
					uni.showToast({
						title: res.msg || '搜索失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('搜索失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 加载更多
		loadMore() {
			if (this.hasMore && !this.loading) {
				this.currentPage++
				this.performSearch(this.currentPage)
			}
		},

		// 切换筛选
		toggleFilter(type) {
			this.closeMask()

			if (this.activeFilter === type) {
				this.activeFilter = ''
				return
			}

			this.activeFilter = type
			this.showMask = true

			// 重置所有下拉状态
			this.showCategoryDropdown = false
			this.showAreaDropdown = false
			this.showSortDropdown = false
			this.showFilterPanel = false

			// 显示对应下拉
			switch (type) {
				case 'category':
					this.showCategoryDropdown = true
					break
				case 'area':
					this.showAreaDropdown = true
					break
				case 'sort':
					this.showSortDropdown = true
					break
				case 'filter':
					this.showFilterPanel = true
					break
			}
		},

		// 关闭遮罩
		closeMask() {
			this.showMask = false
			this.activeFilter = ''
			this.showCategoryDropdown = false
			this.showAreaDropdown = false
			this.showSortDropdown = false
			this.showFilterPanel = false
		},

		// 选择分类
		selectCategory(category) {
			this.selectedCategory = category.name
			this.selectedCategoryId = category.id
			this.closeMask()
			this.performSearch(1)
		},

		// 选择区域
		selectArea(area) {
			this.selectedArea = area.region_name
			this.selectedAreaId = area.id
			this.closeMask()
			this.performSearch(1)
		},

		// 选择排序
		selectSort(sort) {
			this.selectedSort = sort.name
			this.selectedSortId = sort.id
			this.closeMask()
			this.performSearch(1)
		},

		// 切换筛选选项
		toggleFilterOption(option) {
			this.filterOptions[option] = !this.filterOptions[option]
		},

		// 重置筛选
		resetFilter() {
			this.filterOptions = {
				needReserv: false,
				holidayUsable: false,
				weekendUsable: false
			}
		},

		// 应用筛选
		applyFilter() {
			this.closeMask()
			this.performSearch(1)
		},

		// 获取箭头图标
		getArrowIcon(type) {
			if (this.activeFilter === type) {
				return '/static/img/o2o/jt_shang@2x.png'
			}
			return '/static/img/o2o/icon-xia@2x.png'
		},

		// 加载分类
		async loadCategories() {
			try {
				const res = await api.o2oApi.getCateChild({})
				if (res.r === 0 && res.data && res.data.list) {
					this.categoryList = res.data.list
				}
			} catch (error) {
				console.error('加载分类失败:', error)
			}
		},

		// 加载区域
		async loadAreas() {
			try {
				const res = await api.o2oApi.getVicinity({ city_name: this.cityName })
				if (res.r === 0 && res.data && res.data.list) {
					this.areaList = res.data.list
				}
			} catch (error) {
				console.error('加载区域失败:', error)
			}
		},

		// 加载搜索历史
		loadSearchHistory() {
			try {
				const history = uni.getStorageSync('searchHistory')
				if (history) {
					// 如果已经是数组，直接使用
					if (Array.isArray(history)) {
						this.searchHistory = history
					} else {
						// 否则尝试解析JSON
						this.searchHistory = JSON.parse(history)
					}
				} else {
					this.searchHistory = []
				}
			} catch (error) {
				console.error('加载搜索历史失败:', error)
				// 清除无效数据
				uni.removeStorageSync('searchHistory')
				this.searchHistory = []
			}
		},

		// 保存搜索历史
		saveSearchHistory(keyword) {
			// 去重并添加到开头
			this.searchHistory = this.searchHistory.filter(item => item !== keyword)
			this.searchHistory.unshift(keyword)

			// 限制历史记录数量
			if (this.searchHistory.length > 10) {
				this.searchHistory = this.searchHistory.slice(0, 10)
			}

			// 保存到本地存储
			uni.setStorageSync('searchHistory', JSON.stringify(this.searchHistory))
		},

		// 清空搜索历史
		clearHistory() {
			uni.showModal({
				title: '提示',
				content: '确定要清空搜索历史吗？',
				success: (res) => {
					if (res.confirm) {
						this.searchHistory = []
						uni.removeStorageSync('searchHistory')
						uni.showToast({
							title: '已清空',
							icon: 'success'
						})
					}
				}
			})
		},

		// 查看商家
		viewMerchant(storeId) {
			uni.navigateTo({
				url: `/pages/o2o/shangjia?id=${storeId}`
			})
		},

		// 查看商品
		viewGoods(groupId, storeId) {
			uni.navigateTo({
				url: `/pages/o2o/tg-shangpin-xq?group_id=${groupId}&store_id=${storeId}`
			})
		},

		// 获取完整图片URL
		getImageUrl(path) {
			if (!path) return '/static/img/default-merchant.png'
			if (path.startsWith('http')) return path
			return `${this.baseUrl}/${path}`
		}
	}
}
</script>

<style scoped>
/* 基础容器 */
.search-container {
	--primary-color: #ff1e00;
	--primary-gradient: linear-gradient(135deg, #FF8033 0%, #FF6B35 100%);
	--secondary-color: #ff9600;
	--text-primary: #333;
	--text-secondary: #666;
	--text-tertiary: #999;
	--border-color: #e5e5e5;
	--border-light: #f0f0f0;
	--bg-page: #eeeeee;
	--bg-white: #fff;
	--bg-hover: #f8f9fa;
	--spacing-xs: 8rpx;
	--spacing-sm: 12rpx;
	--spacing-md: 20rpx;
	--spacing-lg: 30rpx;
	--spacing-xl: 40rpx;
	--radius-sm: 8rpx;
	--radius-md: 12rpx;
	--radius-lg: 30rpx;
	--shadow-sm: 0 4rpx 24rpx rgba(255, 128, 51, 0.15);
	
	background: var(--bg-page);
	min-height: 100vh;
}

/* ========== 头部搜索栏 ========== */
.header-bag {
	background: var(--primary-gradient);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	box-shadow: var(--shadow-sm);
}

.header-content {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
}

.back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56rpx;
	height: 56rpx;
	margin-right: 20rpx;
}

.search-address {
	flex: 1;
	max-width: 350rpx;
	height: 56rpx;
	background: var(--bg-white);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	padding: 0 24rpx;
	gap: var(--spacing-sm);
}

.search-input {
	flex: 1;
	height: 56rpx;
	font-size: 28rpx;
	color: var(--text-primary);
}

/* ========== 搜索历史 ========== */
.history-wrapper {
	background: var(--bg-white);
}

.history-header {
	padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
}

.history-title {
	font-size: 36rpx;
	color: var(--text-primary);
	font-weight: 600;
}

.history-divider {
	height: 1rpx;
	background: var(--border-color);
}

.history-item {
	padding: var(--spacing-lg);
	font-size: 30rpx;
	color: var(--text-primary);
	border-bottom: 1rpx solid #f5f5f5;
	transition: background 0.3s;
}

.history-item:last-child {
	border-bottom: none;
}

.history-item:active {
	background: var(--bg-hover);
}

.clear-history {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60rpx var(--spacing-lg);
	gap: var(--spacing-xs);
}

.history-clear {
	font-size: 28rpx;
	color: #000;
}

.empty-history {
	text-align: center;
	padding: 100rpx 0;
}

.empty-text {
	font-size: 28rpx;
	color: var(--text-tertiary);
}

/* ========== 筛选栏 ========== */
.goods-list {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: var(--bg-white);
}

.filter-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	height: 88rpx;
	background: var(--bg-white);
	border-bottom: 1rpx solid var(--border-color);
}

.filter-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4rpx;
	font-size: 30rpx;
	color: var(--text-primary);
	transition: color 0.3s;
}

.filter-item.active {
	color: var(--primary-color);
	font-weight: 500;
}

/* 下拉面板 */
.dropdown-panel {
	max-height: 400rpx;
	overflow-y: auto;
	border-bottom: 2rpx solid var(--border-light);
}

.dropdown-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	padding: 0 var(--spacing-lg);
	font-size: 28rpx;
	color: var(--text-primary);
	border-bottom: 2rpx solid var(--bg-hover);
}

.dropdown-item.active {
	color: var(--primary-color);
}

/* 筛选面板 */
.filter-panel {
	border-bottom: 2rpx solid var(--border-light);
}

.filter-options {
	padding: var(--spacing-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.filter-option {
	padding: var(--spacing-md) var(--spacing-lg);
	border: 2rpx solid #ccc;
	border-radius: var(--radius-sm);
	font-size: 28rpx;
	color: var(--text-primary);
	transition: all 0.3s;
}

.filter-option.active {
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.filter-actions {
	display: flex;
	height: 80rpx;
	border-top: 2rpx solid var(--border-light);
}

.reset-btn,
.confirm-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
}

.reset-btn {
	background: var(--bg-hover);
	color: var(--text-secondary);
}

.confirm-btn {
	background: var(--primary-color);
	color: var(--bg-white);
}

/* ========== 搜索结果 ========== */
.result-container {
	height: 100vh;
}

.result-list {
	padding: var(--spacing-md);
}

.merchant-card {
	background: var(--bg-white);
	margin-bottom: var(--spacing-md);
	overflow: hidden;
}

.merchant-info {
	display: flex;
	padding: var(--spacing-lg);
	border-bottom: 1rpx solid var(--border-light);
}

.merchant-logo {
	width: 160rpx;
	height: 160rpx;
	border-radius: var(--radius-md);
	margin-right: 24rpx;
	border: 2rpx solid var(--border-light);
}

.merchant-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.merchant-name {
	font-size: 34rpx;
	color: var(--text-primary);
	font-weight: 600;
	line-height: 1.4;
}

.rating-section {
	margin: var(--spacing-sm) 0;
}

.stars {
	display: flex;
	gap: 4rpx;
}

.star {
	font-size: 28rpx;
	color: var(--border-color);
}

.star.filled {
	color: #FFB400;
}

.merchant-address {
	font-size: 24rpx;
	color: var(--text-tertiary);
	line-height: 1.4;
}

.goods-item {
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 2rpx solid var(--bg-hover);
}

.goods-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-sm);
}

.goods-name {
	flex: 1;
	font-size: 28rpx;
	color: var(--text-primary);
	margin-right: var(--spacing-md);
}

.goods-sold {
	font-size: 24rpx;
	color: var(--text-tertiary);
	white-space: nowrap;
}

.goods-price-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.goods-price {
	font-size: 28rpx;
	color: var(--primary-color);
	font-weight: 600;
}

.goods-rebate {
	font-size: 24rpx;
	color: var(--secondary-color);
}

.view-more {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 26rpx;
	color: var(--primary-color);
	border-top: 2rpx solid var(--border-light);
}

.arrow-right {
	width: 24rpx;
	height: 24rpx;
	margin-left: 10rpx;
}

/* ========== 空状态 ========== */
.no-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 250rpx 0;
}

.no-result-img {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: var(--spacing-xl);
	opacity: 0.8;
}

.no-result-text {
	font-size: 30rpx;
	color: var(--text-secondary);
}

.loading-more {
	text-align: center;
	padding: var(--spacing-xl) 0;
	color: var(--text-tertiary);
	font-size: 28rpx;
}

/* ========== 遮罩层 ========== */
.mask {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 998;
}
</style>